<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/statics/css/blog.css"/>
    <script src="https://unpkg.com/vue@2.5/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/statics/js/iconfont.js"></script>
</head>
<body>
<div id="app">
    <el-container>
            <el-header style="height:50px;">
                <img src="/statics/images/logo.gif" alt="">
                <div>心语博客</div>
            </el-header>
        <el-main id="main">
            <a href="http://localhost:8080/index"><svg t="1730769079151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2134" width="12" height="12"><path d="M282 512c0 19 7.2 38 21.7 52.5l385.7 386.1c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L349 519.3c-4-4-4-10.5 0-14.5l385.7-386.1c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L303.7 459.5C289.2 474 282 493 282 512z" p-id="2135"></path></svg>返回</a>
            <el-container>
                <el-main>
                    <header style="font-size: 25px">
                        {{blog.title}}
                    </header>
                    <div style="margin: 10px 0">
                        <div>
                            <ul>
                                <li>
                                    <span>{{blog.readed}}</span>
                                    <i class="iconfont icon-operation"></i>
                                </li>
                                <li>
                                    <span>{{blog.countOfLiked}}</span>
                                    <i  style="cursor: pointer" class="iconfont icon-xihuan" @click="like" :style="isLike ? 'color:red' : ''"></i>
                                </li>
                                <li>
                                    <span>{{blog.countOfFavorite}}</span>
                                    <i class="el-icon-star-on" @click="favorite" :style="isFavorite ? 'color:red' : ''"></i>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <span>{{blog.createDate | dateFormate}}</span>
                            <span>{{blog.authorName}}</span>
                        </div>
                    </div>
                    <div v-if="isadmin == 1" class="setpremium">
                        <span v-if="isPremium == 0" @click="setpremium">设为精华</span>
                        <span v-if="isPremium == 1" @click="unsetpremium">取消精华</span>
                    </div>
                    <article style="font-size: 18px;margin-top: 10px">
                        {{blog.content}}
                    </article>
                    <section id="comments">
                        <div id="newComment">
                            <p style="font-size: 15px;font-weight: bold">不吐不快：</p>
                            <el-input type="textarea" :rows="2"
                                    placeholder="请输入内容" v-model="newComment.comment">
                            </el-input>
                            <el-button type="success" round @click="submitComment">发送</el-button>
                        </div>
                        <ul>
                            <li v-for="comment in comments" :key="comment.commentId">
                                <div>
                                    <el-avatar :src="comment.reviewer.avatar"></el-avatar>
                                    <span class="nickname">{{comment.reviewer.nickname}}</span>
                                </div>
                                <div>
                                    {{comment.comment}}
                                </div>
                                <div>
                                    {{comment.reviewDate | dateFormate}}
                                </div>
                            </li>
                        </ul>
                    </section>
                </el-main>
                <el-aside>
                    <div id="drawer">
                        <svg t="1730769079151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2134" width="24" height="24"><path d="M282 512c0 19 7.2 38 21.7 52.5l385.7 386.1c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L349 519.3c-4-4-4-10.5 0-14.5l385.7-386.1c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L303.7 459.5C289.2 474 282 493 282 512z" p-id="2135"></path></svg>
                        <svg t="1730769000523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1981" width="24" height="24"><path d="M744 512c0 19-7.2 38-21.7 52.5L336.6 950.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l385.7-386c4-4 4-10.5 0-14.5L291.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l385.7 386.1C736.8 474 744 493 744 512z" p-id="1982"></path></svg>
                    </div>
                    <h2>推荐博文</h2>
                    <ol>
                        <li v-for="blog in recommend" :key="blog.blogId" @click="handleBlog(blog.blogId)">
                            {{blog.title}}
                        </li>
                    </ol>
                </el-aside>
            </el-container>
        </el-main>
        <el-footer height="169px">
            &copy;copy right
        </el-footer>
    </el-container>
</div>
<script src="/statics/js/request.js"></script>
<script>
    var item = document.getElementById("drawer")
    item.addEventListener("click",() => drawer(item))
    function drawer(item){
        console.log("1")
        // item.parentElement.classList.toggle("show")
    }
</script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                blog: { createDate: "1900-01-01 00:00:00" },
                comments: [],
                newComment: {
                    commentId: undefined,
                    comment: '',
                    cBlogId: '',
                    reviewer: '',
                    reviewDate: '1900-01-01 00:00:00'
                },
                recommend: [],
                isadmin:0,
                isPremium:0,
                isLike: false,
                isFavorite: false
            };
        },
        created() {
            this.init();
        },
        mounted() {
            const item = document.getElementById("drawer");
            if (item) {
                item.addEventListener("click", () => this.drawer(item));
            }
        },
        beforeDestroy() {
            const item = document.getElementById("drawer");
            if (item) {
                item.removeEventListener("click", this.drawer);
            }
        },
        methods: {
            async initBlog() {
                let urlArr = window.location.pathname.split("/");
                let id = urlArr[urlArr.length - 1];
                this.newComment.cBlogId = id / 1;
                await request.post("/blog/" + id, (res) => {
                    this.blog = res;
                    this.isLiked();
                    this.isFavorited();
                });
                await request.post("/isadmin", (res) => {
                    this.isadmin =  res.isadmin
                })
                await request.post("/ispremium/" + id, (res) => {
                    this.isPremium = res.isPremium
                });
            },
            async initComments() {
                let urlArr = window.location.pathname.split("/");
                let id = urlArr[urlArr.length - 1];
                await request.post("/comments", { blogId: id }, (res) => {
                    this.comments = res;
                });
            },
            async isLiked() {
                console.log(this.isLike);
                await request.post("/isLikedByBlogId/" + this.blog.blogId, (res) => {
                    this.isLike = res > 0;
                });
            },
            async isFavorited() {
                await request.post("/isFavoritedByBlogId/" + this.blog.blogId, (res) => {
                    this.isFavorite = res > 0;
                });
            },
            async initRecommend() {
                await request.post("/recommend", (res) => {
                    this.recommend = res;
                });
            },
            handleBlog(id) {
                window.location = '/blog/' + id;
            },
            init() {
                this.initBlog();
                this.initComments();
                this.initRecommend();
                request.post("/personalInfomation", (res) => {
                    this.newComment.reviewer = res.userId;
                });
            },
            submitComment() {
                request.post("/newComment", this.newComment, (res) => {
                    this.initComments();
                });
            },
            like() {
                request.post("/liked", { 'iBlogId': this.blog.blogId, 'isLike': this.isLike }, (res) => {
                    this.blog.countOfLiked = res;
                    this.isLike = !this.isLike;
                });
            },
            favorite() {
                request.post("/favorited", { 'fBlogId': this.blog.blogId, 'isFavorite': this.isFavorite }, (res) => {
                    this.blog.countOfFavorite = res;
                    this.isFavorite = !this.isFavorite;
                });
            },
            drawer(item) {
                item.parentElement.classList.toggle("show");
            },
            setpremium(){
                request.post("/setpremium/" + this.blog.blogId, (res) => {
                    this.$message.success("设置成功,即将刷新界面")
                    setTimeout(() => {
                        window.location.reload();
                    }, 2000);
                });
            },
            unsetpremium(){
                request.post("/unsetpremium/" + this.blog.blogId, (res) => {
                    this.$message.success("取消成功,即将刷新界面")
                    setTimeout(() => {
                        window.location.reload();
                    }, 2000);
                });
            }
        },
        filters: {
            dateFormate(date) {
                return date.substring(0, 10);
            }
        }
    });

</script>
</body>
</html>